<div class="mb-3 flex justify-between items-center">
  <div class="h-[41px] flex items-center text-lg font-semibold text-gray-900">
    {{ 'PAC.Xpert.Logs' | translate: {Default: 'Logs'} }}
  </div>
</div>

<div class="flex items-center mb-2 gap-2">
  <ngm-select placeholder="select time range" icon="ri-calendar-line" [selectOptions]="TimeRanges" [(ngModel)]="timeRangeValue" class="min-w-[150px] rounded-lg shadow-sm" />
</div>

<div class="w-full relative overflow-auto flex-1"
  waIntersectionObserver
  waIntersectionThreshold="0.5">
  <table class="table-fixed w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
      <tr>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 w-80 truncate">
          {{ 'PAC.KEY_WORDS.Title' | translate: {Default: 'Title'} }}
        </th>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3">
          {{ 'PAC.KEY_WORDS.CreatedBy' | translate: {Default: 'Created By'} }}
        </th>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3">
          {{ 'PAC.Xpert.ChatFrom' | translate: {Default: 'Chat From'} }}
        </th>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3">
          {{ 'PAC.KEY_WORDS.EndUser' | translate: {Default: 'End User'} }}
        </th>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 w-32">
          {{ 'PAC.KEY_WORDS.MessageCount' | translate: {Default: 'Message Count'} }}
        </th>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 w-32">
          {{ 'PAC.KEY_WORDS.Status' | translate: {Default: 'Status'} }}
        </th>
        <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3">
          {{ 'PAC.KEY_WORDS.UpdatedAt' | translate: {Default: 'Updated At'} }}
        </th>
      </tr>
    </thead>
    <tbody>
      @for (conv of conversations(); track conv.id) {
        <tr class="row cursor-pointer bg-white border-b dark:bg-gray-800 dark:border-gray-700"
          [class.selected]="preview() === conv.id"
          (click)="togglePreview(conv.id)"
        >
          <td class="px-4 py-2 whitespace-nowrap truncate">
            {{conv.title}}
          </td>
          <td class="px-4 py-2">
            {{conv.createdBy | user }}
          </td>
          <td class="px-4 py-2">
            {{conv.from }}
          </td>
          <td class="px-4 py-2">
            {{conv.fromEndUserId}}
          </td>
          <td class="px-4 py-2">
            {{conv.messageCount | number:'0.0-0'}}
          </td>
          <td class="px-4 py-2">
            @switch (conv.status) {
              @case ('busy') {
                <div class="inline-flex items-center gap-1 system-xs-semibold-uppercase">
                  <i class="ri-loader-2-line flex justify-center items-center w-3.5 h-3.5 animate-spin"></i>
                  <span class="">
                    {{ 'PAC.Xpert.Busy' | translate: {Default: 'Busy'} }}
                  </span>
                </div>
              }
              @case ('error') {
                <div class="inline-flex items-center gap-1 system-xs-semibold-uppercase">
                  <div class="w-2 h-2 border border-solid rounded-[3px] bg-red-400 border-red-600 shadow-[0_0_5px_-3px_rgba(249,112,102,0.1),0.5px_0.5px_3px_rgba(249, 112, 102, 0.2), inset_1.5px_1.5px_0_rgba(255, 255, 255, 0.4)]"></div>
                  <span class="text-red-600">
                    {{ 'PAC.Xpert.Failure' | translate: {Default: 'Failure'} }}
                  </span>
                </div>
              }
              @case ('interrupted') {
                <div class="inline-flex items-center gap-1 system-xs-semibold-uppercase">
                  <div class="w-2 h-2 border border-solid rounded-[3px] bg-neutral-500 border-neutral-800 shadow-[0_0_5px_-3px_rgba(249,112,102,0.1),0.5px_0.5px_3px_rgba(249, 112, 102, 0.2), inset_1.5px_1.5px_0_rgba(255, 255, 255, 0.4)]"></div>
                  <span class="">
                    {{ 'PAC.Xpert.Interrupted' | translate: {Default: 'Interrupted'} }}
                  </span>
                </div>
              }
              @case ('idle') {
                <div class="inline-flex items-center gap-1 system-xs-semibold-uppercase">
                  <span class="">
                    {{ 'PAC.Xpert.Idle' | translate: {Default: 'Idle'} }}
                  </span>
                </div>
              }
              @default {
                {{conv.status}}
              }
            }
          </td>
          <td class="px-4 py-2">{{ conv.updatedAt | relative }}</td>
        </tr>
      }
    </tbody>
  </table>

  @if (loading()) {
    <div class="flex justify-center">
      <ngm-spin />
    </div>
  }

  @if (!done()) {
    <button (waIntersectionObservee)="onIntersection()" class="w-full flex justify-center p-2 cursor-pointer hover:bg-gray-100"
      [disabled]="loading()"
      (click)="onIntersection()"
    >
      <i class="ri-arrow-down-wide-line"></i>
    </button>
  }

</div>

@if (preview()) {
  <div class="absolute right-0 top-0 bottom-0 p-4 flex gap-2">
    @if (executionId()) {
      <chat-message-execution class="h-full bg-components-panel-bg shadow-lg border-[0.5px] border-components-panel-border rounded-2xl overflow-y-auto
        w-[420px]"
        [id]="executionId()"
        [xpert]="prev.xpert()"
        (close)="closeExecution()"
      />
    }

    <chat-conversation-preview #prev class="h-full w-[420px] rounded-2xl shadow-lg bg-components-card-bg overflow-auto"
      readonly
      [conversationId]="preview()"
      (close)="preview.set(null)"
      (execution)="selectExecution($event)"
    />
  </div>
}